<template>
  <header class="header">
    <el-row>
      <el-col :span="8">
        <div class="welcome">Welcome</div>
      </el-col>
      <el-col :span="16">
        <div class="header_right">
          <div class="avatar"></div>
          <div class="arrow">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{userInfo.username}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="personalInfo">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-col>
    </el-row>
  </header>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import router from '../models/router'

export default {
  name: 'Header',
  data() {
    return {};
  },
  methods: {
     // 映射 actions
    ...mapActions(['setLoginStatus', 'setUserInfo']),
    async handleCommand(command) {
      switch (command) {
        case 'personalInfo' :
        
        break;
        case 'logout' :
        this.logout();
        break;
      }
    },
    logout() {
      localStorage.removeItem('token');
      // reset store
      this.setLoginStatus(false);
      this.setUserInfo({});
      router.push('/login');
    },
  },
  computed: {
    // 映射state
    ...mapState(['userInfo'])
  }
};
</script>
<style lang='scss' scoped>
.header {
  height: 50px;
  background: #333;
  padding: 5px 20px;
  line-height: 50px;
  color: #fff;
  border-bottom: 1px solid #909399;
  .el-row {
    height: 100%;
    .welcome {
      // text-align: center;
    }
    .header_right {
      text-align: right;
      .arrow {
        .el-dropdown-link {
           color: #fff;
        }
      }
      .avatar {

      }
    }
  }
}
</style>